<template>
  <div class="CommonHeaderWrapper">
    <div class="headerOp">
      <div class="opIcon" title="固定窗口" :class="{fixed: settingStore.fixWindow}" @click="settingStore.setFixWindow"><AimOutlined /></div>
      <div class="opIcon" title="最小化" @click="minimize"><LineOutlined /></div>
      <div class="opIcon" title="最大化" @click="maximize"><ExpandOutlined /></div>
      <div class="opIcon danger" title="关闭" @click="closeApp"><CloseOutlined /></div>
    </div>
    <!--插槽用来显示不同的内容-->
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
import { ipcRenderer } from '@/utils/Electron'
import { AimOutlined, LineOutlined, ExpandOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { Popover } from 'ant-design-vue'
import useSettingStore from '@/stores/settingStore'
const settingStore = useSettingStore()
// 最小化
const minimize = () => {
  ipcRenderer().invoke('sent-main-event', {
    type: 'minimize-window:main'
  })
}
// 最大化
const maximize = () => {
  ipcRenderer().invoke('sent-main-event', {
    type: 'maximize-window:main'
  })
}
const closeApp = () => {
  ipcRenderer().invoke('sent-main-event', {
    type: 'hide:main'
  })
}
</script>
<style lang="less" scoped>

.CommonHeaderWrapper {
  height: 65px;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500;
  border-bottom: 1px solid #dfdfdf;
  box-sizing: border-box;
  .headerOp {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 27px;
    .opIcon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11px;
      width: 34px;
      position: relative;
      z-index: 42;
      -webkit-app-region: no-drag;
      &.fixed {
        background-color: rgba(255, 0, 0, 0.473) !important
      }
      &.danger:hover {
        background-color: rgba(255, 0, 0, 0.473) !important;
      }
      &:hover,
      &.active {
        background-color: #dadada;
      }
      &.active {
        color: #07c160;
      }
    }
  }
}
</style>
